<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Librarian-View-Reader</title>
    <!-- 导航栏-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.css" th:href="@{/bootstrap/css/bootstrap.css}"/>
    <!--  -->
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/librarian_login.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/librarian_view_reader.css"
          th:href="@{/css/librarian_view_reader.css}">
    <style>
        a:link {text-decoration:none;}    /* unvisited link */
        a:visited {text-decoration:none;} /* visited link */
        a:hover {text-decoration:underline;}   /* mouse over link */
        a:active {text-decoration:underline;}  /* selected link */
        #section {
            color:white;
            text-align:center;
            font-size:18px;
            padding:30px;
            display: flex;
            align-items:center;
            justify-content: center;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-dark navbar-fixed-top" role="navigation" style="background-color: black">
    <a class="navbar-brand" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-cloud fa-lg"></i>Libraby</a>
    <a class="navbar-brand" href="#" th:href="@{/user/login}" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-user fa-lg"></i>Logout</a>
    <li class="nav-item dropdown">
        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Reader Management</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: black">
            <a class="dropdown-item" href="#" th:href="@{/librarian_Changeinfo_Reader}" style="color: white">Reader Account</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/librarian_Changeinfo_Reader}" style="color: white">Pending Account</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/librarian_BR_viewReader}" style="color: white">Borrow Return History</a>
        </div>
    </li>
    <a class="navbar-brand" href="#" th:href="@{/incomerecord}" style="color: white">Income</a>
    <li class="nav-item dropdown">
        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Public Notice</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: black">
            <a class="dropdown-item" href="#" th:href="@{/notice}" style="color: white">Publish_Notice</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/notice/update}" style="color: white">Update_Notice</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Pending</a>
        <div class="dropdown-menu dg-dark" aria-labelledby="navbarDropdown" style="background-color: black">
            <a class="dropdown-item" href="#" th:href="@{/borrowmsg}" style="color: white">Borrow</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/returnmsg}"  style="color: white">Return</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/finemsg}" style="color: white">Fine</a>
        </div>
    </li>
    <a class="navbar-brand" href="#" th:href="@{/librarian_book}" style="color: white">Librarian Home</a>
    <a class="navbar-brand" href="/reader_searchbook(no)"  style="color: white">Home</a>
</nav>

<div>
    <div class="my-form" style="margin-top: 200px;" id="form1">
        <div class="test test-5">
            <td class="scrollbar">
                <table id="gradient-style">
                    <thead style="background-color: black">
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Phone Number</th>
                        <th scope="col">Password</th>
                    </tr>
                    </thead>
                    <tbody id="content1">
                    </tbody>
                </table>
        </div>
    </div>

    <!-- 显示读者名字 -->
    <div class="hide" id="myname" style="color: #0f0f0f;font-size: x-large;margin-left: 269px;margin-top: 200px">
    </div>

    <!-- 书籍借阅表格 -->
    <div class="my-form hide"  id="form2">
        <div class="test test-5">
            <td class="scrollbar">
                <table id="gradient-style">
                    <thead style="background-color: black">
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Author</th>
                        <th scope="col">ID</th>
                        <th scope="col">borrow status</th>
                        <th scope="col">borrow time</th>
                        <th scope="col">return time</th>
                        <th scope="col">fine</th>
                    </tr>
                    </thead>
                    <tbody id="content2">
                    </tbody>
                </table>
        </div>
    </div>
</div>

<div>
    <div class="footer">
        <div>
            <a class="navbar-brand" style="color: white;font-size: 30px;font-family: 'Book Antiqua';
                margin-top:1%;margin-left: 10% ">
                <i class="fa fa-cloud fa-lg"></i>
                Library
            </a>
        </div>
        <p>Shan ICP Number 18018134 | Powered by 1713011</p>
    </div>
</div>

<!-- return -->
<button class="hide" id="returnReader" style="color: #0f0f0f;font-size: x-large;margin-left: 1048px" onclick="returnReader()">
    Return
</button>

<!-- js -->
<script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{/easyui/jquery.min.js}"></script>
<script>
    window.onload = function () {
        $.post({
            url: "/librarian_view_reader",
            success: function (data) {
                // 获取读者信息
                var t = "";
                for (var i = 0; i < data.length; i++) {
                    t += "<tr>" +
                        "<td>" + data[i].rname + "</td>" +
                        "<td>" + data[i].phone + "</td>" +
                        "<td>" + data[i].password + "</td>" +
                        "</tr>";
                }
                // 在网页中显示数据
                $("#content1").html(t);

                // 每个条目绑定查询事件
                $("#content1 tr").bind("click", function () {
                    // 获得读者和电话号码
                    let rname = $(this).find('td').html();
                    let phone = $(this).find('td:eq(1)').html();

                    // 隐藏读者信息表，显示借阅表信息
                    $("#form1")[0].classList.add('hide');
                    $("#myname")[0].classList.remove('hide');
                    $("#myname")[0].innerText = "Reader Name : " + rname;
                    $("#form2")[0].classList.remove('hide');
                    $("#returnReader")[0].classList.remove('hide');

                    // 发送请求信息
                    $.post({
                        url: "/librarian_view_br",
                        data: {
                            "rname": rname,
                            "phone": phone
                        },
                        success: function (result) {
                            // 获取借阅信息
                            var br = "";
                            for (var i = 0; i < result.length; i++) {
                                br += "<tr>" +
                                    "<td>" + result[i].bname + "</td>" +
                                    "<td>" + result[i].author + "</td>" +
                                    "<td>" + result[i].id + "</td>" +
                                    "<td>" + result[i].state + "</td>" +
                                    "<td>" + result[i].start_time + "</td>" +
                                    "<td>" + result[i].end_time + "</td>" +
                                    "<td>" + result[i].fine + "</td>" +
                                    "</tr>";
                            }
                            // 在网页中显示数据
                            $("#content2").html(br);
                        }
                    })
                })
            }
        })
    }

    function returnReader() {
        $("#form1")[0].classList.remove('hide');
        $("#myname")[0].classList.add('hide');
        $("#form2")[0].classList.add('hide');
        $("#returnReader")[0].classList.add('hide');
        $.post({
            url: "/librarian_view_reader",
            success: function () {
            }
        })
    }
</script>
</body>
</html>